<!--
用于显示批量执行的过程的对话框

参数：
tableHeight - 滚动区域高度
dlgWidth - 对话框宽度
itemNameColWidth - 条目名称列的宽度
title - 对话框标题
executeBtnTitle - 执行按钮标题
executeState - 执行状态
itemList - 条目列表 结构是[{state, id, label, result}]
value - 显示与否，可用v-model
executeOnOpened - 对话框打开时就自动执行

事件：
'start': 点了开始按钮
'stop': 点了停止按钮
'update:modelValue': value值更新
'show': 对话框出现
'hide': 对话框隐藏
</style>
-->

<template>
  <q-dialog v-model="internalValue" :persistent="props.executeState" transition-show="none" transition-hide="none"
    @show="onShown" @hide="onHide">
    <q-card :style="cardStyle">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">{{$t(props.title)}}</div>
      </q-card-section>
      <q-separator />
      <q-table :style="tableStyle" class="generic-sticky-header-table" flat hide-bottom dense :rows="props.itemList"
        :columns="columnsInfo" row-key="id" :pagination="{page:1,rowsPerPage:0}" separator="cell" wrap-cells>
        <!--状态列插槽-->
        <template v-slot:body-cell-state="props">
          <q-td :props="props" style="padding:0">
            <q-spinner color="primary" size="sm" v-if="props.row.state==='executing'" :title="$t('执行中')" />
            <q-icon color="negative" size="sm" name='ion-md-close-circle' v-else-if="props.row.state==='failed'"
              :title="$t('执行失败')" />
            <q-icon color="positive" size="sm" name='ion-md-checkmark-circle' v-else-if="props.row.state==='succeeded'"
              :title="$t('执行成功')" />
            <q-icon size="sm" name='ion-md-remove' v-else :title="$t('待执行')" />
          </q-td>
        </template>
      </q-table>
      <q-separator />
      <q-card-actions align="right">
        <q-btn color="primary" :disable="props.executeState" :label="$t(props.executeBtnTitle)" @click="onExecute" no-caps
          :loading="props.executeState" />
        <q-btn color="negative" v-show="props.executeState" :disable="stopping" :label="$t('停止')" @click="onStop" no-caps/>
        <q-btn v-close-popup v-show="!props.executeState" color="primary" :label="$t('关闭')" outline no-caps/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
export default {
  name: 'batchExecuteDlg'
}
</script>

<script lang="ts" setup>
import {BatchExecuteItem} from '../defs/comm'
import {computed, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n'

interface PropsDef {
  // 滚动区域高度
  tableHeight?: string,
  // 对话框宽度
  dlgWidth?: string,
  // 条目名称列的宽度
  itemNameColWidth?: string,
  // 对话框标题
  title?: string,
  // 执行按钮标题
  executeBtnTitle?: string,
  // 执行状态
  executeState?: boolean,
  // 条目列表
  itemList?: BatchExecuteItem[]
  // 显示与否
  value?: boolean,
  // 执行时打开
  executeOnOpened?: boolean
}

const props = withDefaults(defineProps<PropsDef>(), {
  tableHeight: '364px',
  dlgWidth: '1000px',
  itemNameColWidth: '200px',
  title: '批量执行',
  executeBtnTitle: '执行',
  executeState: false,
  itemList: () => [] as BatchExecuteItem[],
  value: false,
  executeOnOpened: true
})

// 按下了停止按钮
const stopping = ref(false)

const emit = defineEmits<{
  (e: 'show', data: void): void,
  (e: 'hide', data: void): void,
  (e: 'start', data: void): void,
  (e: 'stop', data: void): void,
  (e: 'update:modelValue', date: boolean): void
}>()

const onShown = function () {
  emit('show')
  if (props.executeOnOpened) {
    onExecute()
  }
}

const onHide = function () {
  emit('hide')
}

const onExecute = function () {
  emit('start')
}
const onStop = function () {
  stopping.value = true
  emit('stop')
}

watch(() => props.executeState, (currVal) => {
  if (!currVal) {
    stopping.value = false
  }
})

const cardStyle = computed(() => {
  return {width: props.dlgWidth, 'max-width': '90vw'}
})

const tableStyle = computed(() => {
  return {height: props.tableHeight}
})

const internalValue = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:modelValue', val)
  }
})

const {t} = useI18n()

const columnsInfo = computed(() => {
  return [
    {
      name: 'state',
      label: t('状态'),
      field: 'state',
      align: 'center',
      style: 'width:40px'
    },
    {
      name: 'label',
      label: t('条目'),
      field: 'label',
      align: 'left',
      style: 'width:' + props.itemNameColWidth
    },
    {
      name: 'result',
      label: t('结果'),
      field: 'result',
      align: 'left'
    }
  ]
})

</script>
